<template>
  <div class="form-filter-my">
    <div class="form-btn">
      <el-button size="small" class="btn-blue" @click="searchClick">查询</el-button>
      <el-button size="small" class="btn-ye" @click="resetFormFilter">重置</el-button>
    </div>
    <!-- // todo 外层 -->
    <div>
      <el-col
        v-for="(item,index) in filterList1"
        :key="index"
        :span="4"
        style="padding: 5px 0px;margin-bottom:5px;margin-right:8px"
      >
        <div style="display:flex;">
          <div class="form-label" style="flex:1.5;">{{ item.label }}:</div>
          <div style="flex: 3">
            <template v-if="item.formType==='0'">
              <selectTree :choose-year="chooseYear" :common-index="index" :label="item.showValue" :show-label="item.showLabel" :item-url="item.url" :placeholder="item.placeholder" :common-values="item.value" @changeData="changeData" />
            </template>
            <template v-if="item.formType==='1'">
              <el-input v-model="item.value" :disabled="item.disabled" :style="{width:item.width?item.width:'100%'}" :rows="item.row" :type="item.inputType" :placeholder="item.placeholder" />
            </template>
            <template v-if="item.formType==='2'">
              <el-select v-model="item.value" style="width:100%" :value-key="item.showValue" filterable clearable :placeholder="item.placeholder" @focus="getSelectFouce1(item)">
                <el-option
                  v-for="(item1,index1) in item.opintion"
                  :key="index1"
                  :label="item1[item.showLabel]"
                  :value="item1[item.showValue]"
                />
              </el-select>
            </template>
            <template v-if="item.formType==='3'">
              <el-date-picker
                v-model="item.value"
                :type="item.pickerType"
                style="width:100%"
                :value-format="item.pickerFormat"
                :placeholder="item.placeholder"
              />
            </template>
            <template v-if="item.formType==='4'">
              <el-date-picker
                v-model="item.value"
                class="picker-monthrange"
                type="monthrange"
                range-separator="至"
                style="width:100%"
                start-placeholder="开始"
                end-placeholder="结束"
              />
            </template>

            <template v-if="item.formType==='5'">
              <el-input v-model="item.value[0]" :disabled="item.disabled" :style="{width:item.width?item.width:'100%'}" :rows="item.row" type="number" />
              -
              <el-input v-model="item.value[1]" :disabled="item.disabled" :style="{width:item.width?item.width:'100%'}" :rows="item.row" type="number" />
            </template>
          </div>
        </div>
      </el-col>
    </div>
    <!-- // todo 内层 -->

    <div>
      <el-collapse v-model="collapse" accordion>
        <el-collapse-item>
          <template slot="title">
            <el-divider>
              <span class="my-filter-label">高级筛选  <i :class="`el-icon-arrow-down my-filter-label-icon ${collapse !== '' && 'my-filter-label-icon-up'}`" /></span>
            </el-divider>

          </template>
          <el-col
            v-for="(item,index) in filterList2"
            :key="index"
            :span="5"
            style="padding:5px;margin-left: 10px;margin-bottom:5px"
          >
            <div style="display:flex;">
              <div class="form-label" :style="{flex:item.label.length>4?'1.8':'1.5'}">{{ item.label }}:</div>
              <div style="flex: 3">
                <template v-if="item.formType==='0'">
                  <selectTree :label="item.key" :choose-year="chooseYear" :common-index="index" :show-label="item.showLabel" :item-url="item.url" :placeholder="item.placeholder" :common-values="item.value" @changeData="changeData" />
                </template>
                <template v-if="item.formType==='1'">
                  <el-input v-model="item.value" :disabled="item.disabled" :style="{width:item.width?item.width:'100%'}" :rows="item.row" :type="item.inputType" :placeholder="item.placeholder" />
                </template>
                <template v-if="item.formType==='2'">
                  <el-select v-model="item.value" style="width:100%" :value-key="item.requestKey" filterable clearable :placeholder="item.placeholder" @focus="getSelectFouce1(item)">
                    <el-option
                      v-for="(item1,index1) in item.opintion"
                      :key="index1"
                      :label="item1[item.showLabel]"
                      :value="item1[item.requestKey]"
                    />
                  </el-select>
                </template>
                <template v-if="item.formType==='3'">
                  <el-date-picker
                    v-model="item.value"
                    :type="item.pickerType"
                    style="width:100%"
                    :value-format="item.pickerFormat"
                    :placeholder="item.placeholder"
                  />
                </template>
                <template v-if="item.formType==='4'">
                  <el-date-picker
                    v-model="item.value"
                    range-separator="-"
                    type="daterange"
                    style="width:100%"
                    :value-format="item.pickerFormat"
                    start-placeholder="开始"
                    end-placeholder="结束"
                  />
                </template>

                <template v-if="item.formType==='5'">
                  <el-input v-model="item.value[0]" :disabled="item.disabled" :style="{width:item.width?item.width:'100%'}" :rows="item.row" type="number" />
                  -
                  <el-input v-model="item.value[1]" :disabled="item.disabled" :style="{width:item.width?item.width:'100%'}" :rows="item.row" type="number" />
                </template>
              </div>
            </div>
          </el-col>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>

</template>

<script type="text/ecmascript-6">
import selectTree from '@/views/indexInput/components/SelectTree.vue';
import { getCommonDataSource } from '@/api/reportCenter';

export default {

  components: {
    selectTree
  },
  data() {
    return {
      chooseYear: '',
      collapse: '',
      // 0 是下拉树 1 是input 2 是下拉框 3是年度选择器 4联级时间选择器
      filterList2: [
        {
          label: '资金来源',
          placeholder: '请选择',
          formType: '2',
          url: 'jc/getResource',
          value: '',
          opintion: [],
          symbol: 'eq',
          showLabel: 'resourceCateName',
          showValue: 'resourceCateCode',
          requestKey: 'resourceCateCode'
        },
        {
          label: '指标类型',
          url: 'jc/getBudgetCategory',
          placeholder: '请选择',
          formType: '2',
          value: '',
          opintion: [],
          symbol: 'eq',
          showLabel: 'budgetCategoryName',
          showValue: 'budgetCategoryCode',
          requestKey: 'budgetcategoryCode'
        },
        {
          label: '发文日期',
          placeholder: '请选择',
          formType: '4',
          pickerType: 'date',
          value: '',
          pickerFormat: 'yyyy-MM-dd',
          requestKey: 'postFileDate'
        },
        {
          label: '文号',
          placeholder: '请输入',
          formType: '1',
          value: '',
          symbol: 'eq',
          isMust: true,
          requestKey: 'fileNo'
        },
        {
          label: '原文号',
          placeholder: '请输入',
          formType: '1',
          value: '',
          symbol: 'eq',
          isMust: true,
          requestKey: 'originalFileNo'
        },
        {
          label: '备注',
          placeholder: '请输入',
          formType: '1',
          value: '',
          symbol: 'eq',
          requestKey: 'remark'
        },
        {
          label: '金额',
          placeholder: '请输入金额',
          formType: '5',
          value: ['', ''],
          symbol: 'eq',
          inputType: 'number',
          isMust: true,
          width: '45%',
          requestKey: 'money'
        },
        {
          label: '原发文日期',
          placeholder: '请选择',
          formType: '4',
          pickerType: 'date',
          value: '',
          pickerFormat: 'yyyy-MM-dd',
          requestKey: 'originalFileDate'
        },
        {
          label: '入账日期',
          placeholder: '请选择',
          formType: '4',
          pickerType: 'date',
          value: '',
          pickerFormat: 'yyyy-MM-dd',
          requestKey: 'accountDate'
        }
      ],
      filterList1: [
        {
          label: '年份',
          placeholder: '请选择年份',
          formType: '3',
          value: '',
          symbol: 'eq',
          pickerType: 'year',
          pickerFormat: 'yyyy',
          isMust: true,
          requestKey: 'year'
        },
        {
          label: '附件名称',
          placeholder: '请输入',
          formType: '1',
          value: '',
          requestKey: 'annex'
        },
        {
          label: '乡镇',
          placeholder: '请选择乡镇',
          formType: '2',
          value: '',
          opintion: [],
          url: 'capitalUser/getBindEnter',
          showLabel: 'NAME',
          key: 'enterpriseCode',
          showValue: 'ISBN_CODE',
          requestKey: 'enterpriseCode'
        },
        // {
        //   label: '归口',
        //   formType: '2',
        //   url: 'jc/getDivisionByEnter',
        //   value: '',
        //   opintion: [],
        //   symbol: 'eq',
        //   showLabel: 'divisionName',
        //   showValue: 'divisionGuid',
        //   requestKey: 'divisionGuid'
        // },
        {
          label: '功能科目',
          placeholder: '请选择',
          formType: '0',
          url: 'jc/getFunctionSection',
          value: '',
          symbol: 'eq',
          showLabel: 'functionSectionText',
          key: 'functionSectionText',
          requestKey: 'functionCode'
        },
        {
          label: '项目名称',
          placeholder: '请输入',
          formType: '1',
          value: '',
          symbol: 'eq',
          key: 'xxx',
          requestKey: 'programName'
        }
      ]
    };
  },

  mounted() {
    this.chooseYear = localStorage.getItem('chooseYear');
  },

  methods: {
    changeData2(row) {
      this.filterList2[row.commonIndex].value = row.data[row.showLabel];
    },
    changeData(row) {
      this.filterList1[row.commonIndex].value = row.data[row.showLabel];
    },
    getSelectFouce1(item) {
      if (!item.opintion.length) {
        getCommonDataSource({
          year: localStorage.getItem('chooseYear'),
          enterGuid: JSON.parse(localStorage.getItem('enterprise_jc'))[0].ENTERPRISE_GUID,
          'userId': localStorage.getItem('xcUserId')
        }, item.url).then(res => {
          if (res.success) {
            res.data.forEach((item1, index) => {
              this.$set(item.opintion, index, item1);
            });
          }
        });
      }
    },

    searchClick() {
      const filterMapList = [].concat(this.filterList1, this.filterList2);
      this.$emit('filterFormSearch', filterMapList);
    },

    // 重置
    resetFormFilter() {
      this.clearForm(this.filterList2);
      this.clearForm(this.filterList1);
    },

    clearForm(arr) {
      arr.forEach(item => {
        if (item.formType === '5') {
          this.$set(item.value, 0, '');
          this.$set(item.value, 1, '');
        } else {
          item.value = '';
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form-filter-my {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 97%
}
.form-label {
  display: flex;
  text-align: center;
  display: inline-block;
  line-height: 35px;
  margin-right: 2px
}

/deep/ .el-collapse {
    border: none;
}

/deep/ .el-collapse-item__arrow {
  margin: 0;
  position: relative;
  left: 50%;
}

/deep/ .el-collapse-item__header {
  border-bottom: none;
}

/deep/ .el-collapse-item__wrap {
  border-bottom: none;
}

/deep/ .el-icon-arrow-right:before {
  color: #1890FF;
  display: none;
}
.my-filter-label {
  position: relative;
  color: #1890FF;
  transform: translate(-25%);
}

.form-btn {
  width: 100px;
  position: absolute;
  right: 0px;
  display: flex;
}
/deep/ .btn-blue {
    color: #1890FF;
    border-color: #1890FF;
  }

  /deep/ .my-filter-label-icon {
    transition: linear .3s;
  }

  /deep/ .my-filter-label-icon-up {
    transform: rotate(-180deg);
  }

  /deep/ .el-divider{
    background: linear-gradient(to right, #fff 20%, rgba(218, 218, 218,.8) 50%, #fff 75%);
  }
</style>
